<template>
    <div class="mi-edit-el-transfer">
        <el-transfer
                filterable
                style="text-align: left; display: inline-block"
                v-model="transfer.value"
                :data="transfer.data"
                :left-default-checked=transfer.leftDefaultChecked
                :right-default-checked=transfer.rightDefaultChecked
                :titles=transfer.titles
                :button-texts=transfer.buttonTexts
                :props=transfer.props
                :format=transfer.format
                @change="transfer.handleChange">
            <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
            <!--                <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>-->
            <!--                <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>-->
        </el-transfer>
        <el-button @click="$K.back('/system/user/list')" size="medium">返 回</el-button>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/aconst/API";
    import BaseVue from "@/utils/BaseVue";
    import {errorMsg, successMsg} from "@/utils/message";
    import {ElForm} from "element-ui/types/form";
    import $http from "@/http";
    import {rule} from "@/utils/Rule";

    @Component({
        name: 'UserEdit',
        components: {},
    })
    export default class UserEdit extends BaseVue {
        transfer: any = {
            props: {
                key: 'key',
                label: 'label'
            },
            format: {
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
            },
            leftDefaultChecked: [2, 3],
            rightDefaultChecked: [1],
            titles: ['全部角色', '当前角色'],
            // buttonTexts: ['删除', '添加'],
            data: this.generateData(),
            value: [],
            handleChange(value: any, direction: any, movedKeys: any) {
                console.log(value, direction, movedKeys);
            }
        };


        mFormData: any = {};
        mRules = {
            name: [rule.notNullBlur()],
        };

        generateData() {
            const data = [];
            for (let i = 1; i <= 15; i++) {
                data.push({
                    key: i,
                    label: `备选项 ${i}`,
                    disabled: i % 4 === 0
                });
            }
            return data;
        };

        //初始化
        async mounted() {
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //执行修改操作
        insert() {
            (this.$refs.mFormData as ElForm).validate((valid: boolean) => {
                if (valid) {
                    $http.post(API.adminAppUserUpdate, this.mFormData)
                        .then((res: any) => {
                            if (res.success) {
                                successMsg("操作成功");
                            }
                        });
                } else {
                    errorMsg("表单内容填写错误，请检查！")
                }
            });
        }

        //文件上传地址
        uploadUrl = API.adminUploadUrl;
    }


</script>
<style lang="scss">
    .mi-edit-el-transfer {
        .el-transfer-panel__list.is-filterable {
            height: 250px;
        }

        .el-transfer-panel__body {
            height: 330px;
        }
    }
</style>
